<template>
	<view class="calendar">
		<view class="calendar-header">
			<text>直播日历</text>
		</view>
		<view class="calendar-container">
			<view v-for="(day, index) in calendarDays" :key="index" class="calendar-day" @click="onDayClick(day.date)">
				<text class="day-of-week">{{ day.dayOfWeek }}</text>
				<text class="day-number"  :class="{ 'selected-day': day.isToday && !selectedDate || selectedDate === day.date.toDateString() }">{{ day.day }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				today: new Date(),
				calendarDays: [],
				selectedDate: null, // 用来记录选中的日期
			};
		},
		methods: {
			getCalendarDays() {
				const start = new Date(this.today);
				start.setDate(this.today.getDate() - 3);
				const end = new Date(this.today);
				end.setDate(this.today.getDate() + 3);

				let current = new Date(start);
				this.calendarDays = [];

				const dayNames = [
					"日",
					"一",
					"二",
					"三",
					"四",
					"五",
					"六",
				];

				while (current <= end) {
					const dayOfWeek = dayNames[current.getDay()];
					const isToday = this.isSameDay(current, this.today);
					//const isPast = current < this.today;
					const dayObj = {
						date: new Date(current), // 创建一个新的 Date 对象以避免后续修改影响已存储的对象
						day: current.getDate(),
						isToday: isToday,
						dayOfWeek: dayOfWeek,
					};
					this.calendarDays.push(dayObj);

					// 在这里打印当前的日期对象
					//console.log('Current date in loop:', dayObj.date.toDateString());

					current.setDate(current.getDate() + 1);
				}

				// 打印整个 calendarDays 数组
				//console.log('Calendar days array:', this.calendarDays);
			},
			isSameDay(date1, date2) {
				return (
					date1.getFullYear() === date2.getFullYear() &&
					date1.getMonth() === date2.getMonth() &&
					date1.getDate() === date2.getDate()
				);
			},
			onDayClick(date) {
				this.selectedDate = date.toDateString(); // 更新选中的日期
				const clickedDate = new Date(date);
				// 触发自定义事件，并传递日期作为参数
				this.$emit('day-click', clickedDate);
			},
		},
		mounted() {
			this.getCalendarDays();
		},
	};
</script>

<style scoped>
	.calendar {
		background-color: #FFFFFF;
		height: 88px;
		border-radius: 14px;
		padding: 10px;
		background: radial-gradient(circle, #FCF7EF,#FFE7CF);

	}

	.calendar-header {
		color: #4B3B3A;
		font-weight: 500;
		font-size: 14px;
		text-align: left;
		margin-bottom: 10px;
	}

	.calendar-days {
		display: flex;
		flex-wrap: wrap;
	}

	.calendar-day {
		width: 14.28%;
		/*7天，所以每个单元格占1/7的宽度，即14.28% */
		text-align: center;
		padding: 10px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.calendar-day.today {
		background-color: #ffeb3b;
		color: #000;
	}

	.calendar-container {
		display: flex;
		flex-wrap: wrap;
	}

	.day-of-week {
		font-size: 12px;
		color: #C66200;
	}

	.day-number {
		font-size: 13px;
		padding: 5px;
		margin-top: 5px;
		color: #C66200;
	}

	.selected-day {
		background-color: #E6AE5C;
		padding: 5px;
		border-radius: 50%;
		color: #FFFFFF;
	}
</style>
